<!--
@description ：敏感词监控
-->

<template>
  <div class="app-container">
    <el-card>
      <h3>敏感词监控</h3>
    </el-card>
    <el-card style="margin-top: 20px;">
      <el-row class="header-search">
        <el-col :span="16">
          <el-form :model="queryForm" style="display: flex;">
            <el-form-item prop="sensitiveWord" style="width: 350px">
              <el-input v-model="queryForm.sensitiveWord" clearable placeholder="请输入敏感词">
                <i slot="suffix" class="el-input__icon el-icon-search"></i>
              </el-input>
            </el-form-item>
            <el-form-item prop="isRevocation" style="width: 350px">
              <el-select v-model="queryForm.isRevocation" clearable placeholder="是否撤回" style="width: 350px">
                <el-option v-for="item in isRevocationList" :key="item.dictValue" :label="item.dictLabel"
                           :value="item.dictValue"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="8" style="text-align: end">
          <el-button icon="el-icon-search" type="primary" @click="handleQuery">查询</el-button>
          <el-button icon="el-icon-refresh" plain type="info" @click="handleReset">重置</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="mt20 mtl-0">
      <el-row>
        <el-col :span="4">
          <div class="mt-20">
            <grouping ref="groupNode" :media-type.sync="mediaType" :show-select-name.sync="showSelectName"
                      @updateGroupData="updateGroupData" @updateNodeToQuery="updateNodeToQuery"></grouping>
          </div>
        </el-col>
        <el-col :span="20" style="border-left: 1px solid #eee; padding: 16px 15px 20px 15px;">
          <div style="text-align: right; margin: 0 0 16px;">
            <el-button v-has-permi="['risk:sensitiveWord:add']" icon="el-icon-plus" type="primary" @click="addWord">新建
            </el-button>
          </div>
          <div>
            <el-table v-has-permi="['risk:sensitiveWord:list']" v-loading="loading" :data="tableList" max-height="560" min-height="420"
                      style="width: 100%">
              <el-table-column align="center" label="敏感词" min-width="260"
                               prop="sensitiveWord">
                <template slot-scope="scope" v-if="scope.row.sensitiveWord">
                  <el-tag
                    v-for="tag in scope.row.sensitiveWord.split(',')"
                    :key="tag"
                    :disable-transitions="false">
                    {{ tag }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column :show-overflow-tooltip="true" align="center" label="是否启动撤回" min-width="140"
                               prop="revocation"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" align="center" label="分组" min-width="150"
                               prop="categoryName">
              </el-table-column>
              <el-table-column :show-overflow-tooltip="false" align="center" label="触发总次数" min-width="140"
                               prop="triggerNum"></el-table-column>
              <el-table-column :show-overflow-tooltip="false" align="center" label="撤回总次数" min-width="140"
                               prop="revocationNum">
              </el-table-column>
              <el-table-column :show-overflow-tooltip="false" align="center" label="创建人" min-width="150"
                               prop="createBy"></el-table-column>
              <el-table-column :show-overflow-tooltip="false" align="center" label="更新时间" min-width="170"
                               prop="updateTime"></el-table-column>
              <el-table-column align="center" class-name="small-padding fixed-width" fixed="right" label="操作"
                               width="180">
                <template slot-scope="{ row }">
                  <div style="display: flex; justify-content: space-around">
                    <el-button size="mini" type="text" @click="wordDetail(row)">详情
                    </el-button>
                    <el-button v-has-permi="['risk:sensitiveWord:edit']" size="mini" type="text" @click="editWord(row)">
                      编辑
                    </el-button>
                    <el-button v-has-permi="['risk:sensitiveWord:remove']" size="mini" type="text"
                               @click="deleteItem(row)">删除
                    </el-button>
<!--                    <el-button size="mini" type="text" @click="withdraw(row)">撤回记录-->
<!--                    </el-button>-->
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <NormalPagination :currentPage="queryForm.pageNum" :page-size-list="pageSizeList"
                              :pageSize="queryForm.pageSize"
                              :total="total" @handleCurrentChange="getListFn"
                              @handleSizeChange="getListFn"></NormalPagination>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-dialog :close-on-click-modal="false" :close-on-press-escape="false"
               :show-close="false" :title="operateFlag == 'edit' ? '编辑敏感词' : '添加敏感词'"
               :visible="operateVisible" width="540px">
      <el-form ref="operateForm" :model="operateForm" :rules="operateRules" label-width="150px">
        <el-form-item label="分组:" prop="categoryId">
          <el-select v-model="operateForm.categoryId" clearable placeholder="请选择分组" style="width: 300px">
            <el-option v-for="dict in groupList" :key="dict.id" :label="dict.name" :value="dict.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="是否启用触发撤回:" prop="isRevocation">
          <el-select v-model="operateForm.isRevocation" clearable placeholder="请选择是否启用触发撤回"
                     style="width: 300px">
            <el-option v-for="dict in isRevocationList" :key="dict.dictValue" :label="dict.dictLabel"
                       :value="dict.dictValue"/>
          </el-select>
        </el-form-item>
        <el-form-item label="敏感词:" prop="sensitiveWord">
          <el-tag
            v-for="tag in operateForm.sensitiveWord"
            :key="tag"
            :disable-transitions="false"
            closable
            @close="handleClose(tag)">
            {{ tag }}
          </el-tag>
          <el-input
            v-if="inputVisible"
            ref="saveTagInput"
            v-model="inputValue"
            class="input-new-tag"
            max="30"
            size="small"
            @blur="handleInputConfirm"
            @keyup.enter.native="handleInputConfirm"
          >
          </el-input>
          <el-button v-else v-show="operateForm.sensitiveWord && operateForm.sensitiveWord.length < 10"
                     class="button-new-tag"
                     size="small"
                     @click="showInput">
            +&nbsp;&nbsp;新标签&nbsp;&nbsp;{{ operateForm.sensitiveWord.length || 0 }}/10
          </el-button>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button :loading="operateLoading" plain type="info" @click="operateVisible = false">取 消
        </el-button>
        <el-button :loading="operateLoading" type="primary" @click="operateSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="delvisible" title="删除确认" width="320px">
      <div style="text-align: center;height: 50px;line-height: 50px;">
        <i class="el-icon-question" style="color: #082AFF;margin-right: 10px;"></i><span>确认删除该敏感词吗?</span>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button :loading="delloading" size="mini" @click="delvisible = false">取 消</el-button>
        <el-button :loading="delloading" size="mini" type="primary" @click="deleteConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import grouping from "@/components/grouping.vue";
import tagGroupShowTable from "@/components/tagGroupShowTable.vue";
import * as $api from '@/api/riskManager/word'

export default {
  name: "sensitiveWordMonitoring", //页面名称，必填
  props: {},
  components: {
    grouping,
    tagGroupShowTable
  },
  data() {
    const checksensitiveWord = (rule, value, callback) => {
      console.log('录入的标签数据:::::::', value);
      if (value && value.length > 0) {
        callback();
      } else {
        callback(new Error("请至少录入一组敏感词标签"));
      }
    }
    return {
      queryForm: {
        sensitiveWord: '',
        isRevocation: '',
        categoryId: '',
        pageNum: 1,
        pageSize: 10,
      },
      pageSizeList: [10, 20, 30, 50],
      isRevocationList: [
        {dictValue: "0", dictLabel: '是'},
        {dictValue: "1", dictLabel: '否'},
      ],
      loading: false,
      tableList: [],
      total: 0,

      mediaType: '14',
      showSelectName: true,

      operateVisible: false,
      operateFlag: 'add',
      operateForm: {
        categoryId: '',
        isRevocation: '',
        sensitiveWord: [],
      },
      operateFormRemark: {},
      operateRules: {
        categoryId: {required: true, message: '请选择分组名称', trigger: 'change'},
        isRevocation: {required: true, message: '请选择是否启用触发撤回', trigger: 'change'},
        sensitiveWord: {validator: checksensitiveWord, trigger: 'blur'}
      },
      operateLoading: false,

      groupList: [], // 分组列表

      inputVisible: false,
      inputValue: '',

      delvisible: false, // 删除选择弹窗
      delloading: false,

      currentWordId: '',
    }
  },
  watch: {},
  methods: {
    handleQuery() {
      this.queryForm.pageNum = 1
      this.getListFn()
    },
    handleReset() {
      this.queryForm = {
        sensitiveWord: '',
        isRevocation: '',
        categoryId: '',
        pageNum: 1,
        pageSize: 10,
      }
      this.getListFn()
    },
    getListFn() {
      let obj = {...this.queryForm}
      this.tableList = []
      this.loading = true
      $api.getSensitiveWordList(obj).then(res => {
        if (res.code == 200) {
          this.tableList = res.rows
          this.total = res.total
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    // 删除
    deleteItem(row) {
      this.delvisible = true
      this.currentWordId = row.wordId
    },
    handleCurrentChange() {

    },
    handlePageSizeChange() {

    },

    // 更新分组数组
    updateGroupData(val) {
      console.log('分组数据::::::::', val)
      this.groupList = val
    },
    // 更新分组触发查询
    updateNodeToQuery(val) {
      console.log('分组查询id:::::::', val)
      this.queryForm.categoryId = val
      this.getListFn()
    },

    // 新建
    addWord() {
      this.operateFlag = 'add'
      this.operateVisible = true
      this.operateForm = {
        categoryId: '',
        isRevocation: '',
        sensitiveWord: [],
        wordId: '',
      }
      this.$nextTick(() => {
        this.$refs['operateForm'].clearValidate()
      })
    },
    // 编辑
    editWord(row) {
      this.operateFlag = 'edit'
      this.operateVisible = true
      const { categoryId, isRevocation, wordId } = row
      this.operateForm = {
        categoryId,
        isRevocation: String(isRevocation),
        wordId,
        sensitiveWord: row.sensitiveWord.split(',')
      }
      this.operateFormRemark = JSON.parse(JSON.stringify(this.operateForm))
      this.$nextTick(() => {
        this.$refs['operateForm'].clearValidate()
      })
    },

    // 详情
    wordDetail(row) {
      this.$router.push({
        name: 'SensitiveWordMonitoringDetail',
        query: {
          wordId: row.wordId
        }
      })
    },

    // 撤回记录
    withdraw(row) {
      this.$router.push({
        name: 'SensitiveWordMonitoringWithdraw',
        query: {
          wordId: row.wordId
        }
      })
    },

    // 编辑/添加 敏感词
    operateSubmit() {
      this.$refs.operateForm.validate(valid => {
        if (valid) {
          let obj = {
            categoryId: this.operateForm.categoryId,
            isRevocation: this.operateForm.isRevocation,
            sensitiveWord: this.operateForm.sensitiveWord.toString(),
            wordId: this.operateForm.wordId
          }
          this.operateLoading = true
          if(this.operateForm.wordId){
            console.log('比较结果:::::::::::::',this.operateFormRemark.sensitiveWord , this.operateForm.sensitiveWord , this.operateFormRemark.isRevocation , this.operateForm.isRevocation , this.operateFormRemark.categoryId , this.operateForm.categoryId, this.operateFormRemark.sensitiveWord == this.operateForm.sensitiveWord && this.operateFormRemark.isRevocation == this.operateForm.isRevocation && this.operateFormRemark.categoryId == this.operateForm.categoryId,)
            if(this.operateFormRemark.sensitiveWord.toString() == this.operateForm.sensitiveWord.toString() && this.operateFormRemark.isRevocation == this.operateForm.isRevocation && this.operateFormRemark.categoryId == this.operateForm.categoryId){
              this.$confirm('本次未修改敏感词信息，是否继续？', '提示', {
                confirmButtonText: '是',
                cancelButtonText: '否',
                type: 'warning'
              }).then(() => {
                $api.editSensitiveWord(obj).then(res => {
                  if (res.code == 200) {
                    this.operateVisible = false
                    this.handleQuery()
                  }
                  this.operateLoading = false
                }).catch(() => {
                  this.operateLoading = false
                })
              }).catch(() => {
                this.operateLoading = false
              })
            }else{
              $api.editSensitiveWord(obj).then(res => {
                if (res.code == 200) {
                  this.operateVisible = false
                  this.handleQuery()
                }
                this.operateLoading = false
              }).catch(() => {
                this.operateLoading = false
              })
            }
          }else{
            $api.addSensitiveWord(obj).then(res => {
              if (res.code == 200) {
                this.operateVisible = false
                this.handleQuery()
              }
              this.operateLoading = false
            }).catch(() => {
              this.operateLoading = false
            })
          }
        }
      })
    },


    // 删除标签
    handleClose(tag) {
      this.operateForm.sensitiveWord.splice(this.operateForm.sensitiveWord.indexOf(tag), 1);
    },

    showInput() {
      if (this.operateForm.sensitiveWord.length >= 10) return
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.operateForm.sensitiveWord.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },

    deleteConfirm() {
      this.delloading = true
      $api.beforeDel({wordId: this.currentWordId}).then(res => {
        if (res.code == 200){
          if(res.data){
            this.$confirm('该敏感词有触发记录，删除后将不可再查询，是否继续？', '删除确认', {
              confirmButtonText: '是',
              cancelButtonText: '否',
              type: 'warning'
            }).then(() => {
              $api.delSensitiveWord({wordId: this.currentWordId}).then(res => {
                if (res.code == 200) {
                  this.delvisible = false
                  this.handleQuery()
                }
                this.delloading = false
              }).catch(() => {
                this.delloading = false
              })
            }).catch(() => {
              this.delloading = false
              this.delvisible = false
            })
          }else{
            $api.delSensitiveWord({wordId: this.currentWordId}).then(res => {
              if (res.code == 200) {
                this.delvisible = false
                this.handleQuery()
              }
              this.delloading = false
            }).catch(() => {
              this.delloading = false
            })
          }
        }
        this.delloading = false
      }).catch(() => {
        this.delloading = false
      })
    },
  },
  mounted() {
  },
  created() {
  },
}

</script>

<style lang="scss" scoped>

.app-container {
  height: 100%;
}

.header-search {
  display: flex;
  align-items: center;
}

::v-deep {
  .el-tag {
    margin: 0 0 6px 10px;
    height: 30px;
    color: #999 !important;
    line-height: 30px;
    border: 1px solid #ccc !important;
    border-radius: 3px;
    background: rgba(153, 153, 153, 0.1) !important;
  }

  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 3px;
    border: 1px dashed #ccc !important;
    background: transparent !important;
    color: #999 !important;
  }

  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
    border: 1px dashed #ccc !important;
    background: transparent !important;
    color: #999 !important;

    .el-input__inner:focus {
      border: 0;
    }
  }

  .el-tag--small .el-icon-close {
    color: #979797;
    font-size: 14px;

    &:hover {
      background: transparent;
    }
  }
}

.mtl-0 {
  ::v-deep.el-card__body {
    padding: 15px 20px 20px 0 !important;
  }
}
</style>
